<template>
	<view class="institution">
		<!-- <view :style="'height:'+statusBarHeight+'px;'">
		</view> -->
		<!-- <view v-if="isDetail.status!=2" style="height: 88rpx;width: 100%;"></view> -->
<!-- 		<view v-if="isDetail.status!=2" class="auditStatus">
			<view v-if="isDetail.status==1" class="waiting">
				正在审核中···
			</view>
			<view v-if="isDetail.status==3" class="fail">
				审核失败
			</view>
		</view> -->
		<view v-if="isDetail.status==1" class="waiting">
			正在审核中···
		</view>
		<view v-if="isDetail.status==3" class="fail">
			审核失败
		</view>
		
		<view class="inputBox flex-center-between">
			<view class="inputName">
				制造商名称
			</view>
			<u-input placeholder="请填写制造商名称" :border="border" :disabled="isDetail&&isDetail.status!=3" :customStyle="inputStyle"
				inputAlign="right" v-model="formData.company" clearable></u-input>
		</view>
		<view class="inputBox flex-center-between">
			<view class="inputName">
				制造商地址
			</view>
			<!-- 	<view class="flex-center-between">
				<u-input placeholder="填选择地址信息" :border="border" @click="onAdress" disabled="true"
					:customStyle="inputStyle" inputAlign="right" v-model="formData.address" clearable></u-input>
				<image style="width: 32rpx;height:32rpx" src="../../../static/images/right.png" mode=""></image>
			</view> -->
			<u-input placeholder="请填写地址信息" :border="border" :disabled="isDetail&&isDetail.status!=3" :customStyle="inputStyle"
				inputAlign="right" v-model="formData.address" clearable></u-input>
		</view>
		<view class="inputBox flex-center-between">
			<view class="inputName">
				负责人姓名
			</view>
			<u-input placeholder="请填写负责人姓名" :border="border" :disabled="isDetail&&isDetail.status!=3" :customStyle="inputStyle"
				inputAlign="right" v-model="formData.name" clearable></u-input>
		</view>
		<view class="inputBox flex-center-between">
			<view class="inputName">
				负责人电话
			</view>
			<u-input placeholder="请填写负责人电话" type="number" maxlength="11" :disabled="isDetail&&isDetail.status!=3" :border="border"
				:customStyle="inputStyle" inputAlign="right" v-model="formData.phone" clearable></u-input>
		</view>
<!-- 		<view class="inputBox flex-center-between">
			<view class="inputName">
				机构类型
			</view>
			<view class="type flex-center-between">
				<view @click="onOrganization_type(1)" :class="{'active':formData.organization_type==1}" class="part">
					机构
				</view>
				<view @click="onOrganization_type(2)" :class="{'active':formData.organization_type==2}"
					style="margin-left: 24rpx;" class="part">
					乐器供应商
				</view>
			</view>
		</view>
		<view v-if="formData.organization_type==2" class="selectWra">
			<view style="width: 100%;padding:0 24rpx;box-sizing: border-box;" class="flex-center-between">
				<view class="inputName">
					代理品牌
				</view>
				<view class="flex-center-center">
					<u-input placeholder="去选择" @click="toSelect" :border="border" disabled="true"
						:customStyle="inputStyle" inputAlign="right" v-model="formData.value" clearable></u-input>
					<image style="width: 32rpx;height:32rpx;" src="../../../static/images/right.png" mode=""></image>
				</view>
			</view>
			<view class="selectBox">
				<view v-for="(item,index) in formData.brand " :key="index" class="selectBox-part flex-center-center">
					<view class="selectBox-part-name exceedingEllipsis">{{item.title}}</view>
					<image @click="deleteBrand(item,index)" src="../../../static/images/my/delete.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<view class="businessLicense">
			<text class="inputName">
				上传营业执照
			</text>

			<view class="uploadBox1">
				<u-upload width="200"  height="200" :max-count="!isDetail?'9':'1'" :action="action" upload-text="上传图片"
					:file-list="fileList" @on-remove="onRemove" :deletable="!isDetail" @on-success="onsSuccess">
				</u-upload>
			</view>

		</view>
		<view class="illustrate">
			<text class="name">
				申请说明
			</text>
			<view class="textareaBox">
				<u-input class="textarea" placeholder="请填写说明" type="textarea" v-model="formData.main_content"
					clearable></u-input>
			</view>
		</view>

		<view :style="'padding-bottom:'+ safeAreaBottom+'px;height:120rpx;'"></view>

		<view class="bottom flex-center-center bottom-style" >
			<view v-if="isStatus ==1" >
				<view v-if="vip_info.is_vip==1" class="applyFor flex-center-between">
					<view style="display: flex;flex-direction: column;">
						<text class="price">￥{{isprice}}/年</text>
						<text class="stop">会员截止：{{vip_info.vip_end}}</text>
					</view>
					<text @click="onSubmit" class="btn">
						立即续费
					</text>
				</view>
				<view v-if="vip_info.is_vip==0&&isDetail.status==3" class="result flex-center-between">
					<view @click="onReason" class="reason">
						查看原因
					</view>
					<view @click="onSubmit" class="resubmit">
						重新提交
					</view>
				</view>
			</view>
			<view  v-if="isStatus==0"  class="applyFor flex-center-between">
				<view style="display: flex;flex-direction: column;">
					<text class="price">￥{{isprice}}/年</text>
				</view>
				<text @click="onSubmit" class="btn">
					申请认证
				</text>
			</view>
			
<!-- 			<view v-if="vip_info.is_vip==0&&isStatus==0" class="applyFor flex-center-between">
				<view style="display: flex;flex-direction: column;">
					<text class="price">￥200.00/年</text>
				</view>
				<text @click="onSubmit" class="btn">
					申请认证
				</text>
			</view>
			<view v-if="vip_info.is_vip==1" class="applyFor flex-center-between">
				<view style="display: flex;flex-direction: column;">
					<text class="price">￥200.00/年</text>
					<text class="stop">会员截止：{{vip_info.vip_end}}</text>
				</view>
				<text @click="onSubmit" class="btn">
					立即续费
				</text>
			</view>
			<view v-if="vip_info.is_vip==0&&isDetail.status==3" class="result flex-center-between">
				<view @click="onReason" class="reason">
					查看原因
				</view>
				<view @click="onSubmit" class="resubmit">
					重新提交
				</view>
			</view> -->
			
			<view :style="'height:'+safeAreaBottom+'px'">

			</view>
		</view>
		<payPop ref="payPop" @payBack="payBack"></payPop>
		<u-picker class="" mode="region" v-model="showAdress" @confirm="onchange($event)"
			:defaultRegion="defaultRegion">
		</u-picker>
		<xModal v-model="contractObj.isShow" :showBotton="contractObj.showBotton"
			:showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel"
			:cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
			{{contractObj.content}}
		</xModal>
	</view>
</template>

<script>
	import xModal from '../../../components/x-modal/x-modal.vue';
	import api from '@/api/index.js';
	import payPop from '../payPop.vue';
	import config from '@/js/config.js';
	export default {
		components: {
			xModal,
			payPop
		},
		data() {
			return {
				statusBarHeight: uni.getStorageSync('statusBarHeight'),
				safeAreaBottom: uni.getStorageSync('safeAreaBottom'),
				border: false,
				showAdress: false,
				defaultRegion: [],
				show: true,
				inputStyle: {
					'width': '50%',
					'font-size': '28rpx'
				},
				contractObj: {
					title: '失败原因',
					content: '',
					isShow: false,
					showBotton: false,
					cancelText: '取消',
					confirmText: '确认',
					showOneBotton: true,
				},
				list: [],
				selectList: [],
				isStatus:0,//首次加载 是否需要申请验证按钮
				isprice:'0',
				formData: {
					types: 2,
					company: '',
					address: '',
					name: '',
					phone: '',
					organization_type: 1,
					brand: [],
					license: '',
					main_content: '',
					total_money: 200,
					actual_money: 200,
					payment: '',
					terminal: uni.getSystemInfoSync().platform,
				},
				vip_info: {

				},
				isDetail: false,
				action: `${config.reqUrl}/api/common/upload`,
				fileList: []
			}
		},
		onShow() {
			this.getData();
		},
		onLoad(options) {
			let that = this;
			uni.$on('list', arr => {
				that.selectList = arr;
				that.formData.organization_type = 2;
				that.formData.brand = [];
				that.selectList.map((item, index) => {
					item.children.map(child => {
						if (child.isSelect) {
							that.formData.brand.push(child)
						}
					})

				})
			})
			// if (options.list) {
			// 	if (uni.getStorageSync('formData')) {
			// 		this.formData = uni.getStorageSync('formData');
			// 	}
			// 	this.formData.brand = [];
			// 	this.selectList = JSON.parse(decodeURIComponent(options.list));
			// 	console.log('接受list', this.selectList)
			// 	this.formData.organization_type = 2;
			// 	this.selectList.map((item, index) => {
			// 		item.children.map(child => {
			// 			if (child.isSelect) {
			// 				this.formData.brand.push(child)
			// 			}
			// 		})

			// 	})
			// }else{

			// }
		},
		methods: {

			getData() {
				let that = this;
				api.base.getDev_applyDetail({
					types: 2
				}).then(res => {
                    console.log('22222',res.data.price)
					that.vip_info = res.data.vip_info;
					that.isStatus=res.data.state
					that.isprice=res.data.price
					if (res.data.apply_info && res.data.apply_info.status > 0) {
						that.isDetail = res.data.apply_info;
						if (res.data.apply_info) {
							that.fileList = [];
							that.formData = res.data.apply_info;
							
							console.log("111111",that.formData)
							that.fileList.push({
								url: res.data.apply_info.license
							});
							
                        that.selectList = this.formData.brand;
							that.$forceUpdate();
						}
					}

				})
			},
			onAdress() {
				if (this.isDetail&&this.isDetail.status!=3) {
					return;
				};
				this.showAdress = true;
			},
			onOrganization_type(type) {
				if (this.isDetail&&this.isDetail.status!=3) {
					return;
				};
				this.formData.organization_type = type;
			},
			onUpload() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机
					success: function(res) {
						that.formData.license = JSON.stringify(res.tempFilePaths)
						console.log(JSON.stringify(res.tempFilePaths)); //拍照图片的路径
					}
				});
			},
			toSelect() {
				if (this.isDetail&&this.isDetail.status!=3) {
					return;
				}
				let selectList = JSON.stringify(this.selectList);
				uni.setStorageSync('formData', this.formData);
				uni.navigateTo({
					url: '/pages/my/institution/selectSupplier?selectList=' + encodeURIComponent(selectList)
				})
			},
			deleteBrand(item, index) {
				if (this.isDetail&&this.isDetail.status!=3) {
					return;
				}
				this.formData.brand.splice(index, 1);
				this.selectList.map(p => {
					if (p.type == item.py) {
						p.children.map(son => {
							if (son.title == item.title) {
								son.isSelect = false;
							}
						})
						// Delete p
					}
				});
				this.$forceUpdate()

			},
			onchange(e) {
				console.log(e)
				this.defaultRegion[0] = e.province.name;
				this.defaultRegion[1] = e.city.name;
				this.defaultRegion[2] = e.area.name;
				this.formData.address = e.province.name + '' + e.city.name + '' + e.area.name;
				this.showAdress = false;
			},
			onReason() {
				this.contractObj.content = this.formData.reject_reason;
				this.contractObj.isShow = true;
			},
			confirm() {
				this.contractObj.isShow = false;
			},
			cancel() {
				this.contractObj.isShow = false;
			},
			check() {
				const phoneReg = /^1[34578]\d{9}/;
				let showText = '';
				if (!this.formData.company) {
					showText = "请填写机构名称";
				} else if (!this.formData.address) {
					showText = "请填写地址信息";
				} else if (!this.formData.name) {
					showText = "请填写负责人姓名";
				} else if (!phoneReg.test(this.formData.phone)) {
					showText = "请输入正确负责人电话";
				} else if (this.fileList.length == 0) {
					showText = "请上传营业执照照片";
				} else if (!this.formData.main_content) {
					showText = "请填写申请说明";
				}
				if (showText) {
					uni.showToast({
						icon: 'none',
						title: showText
					});
					return false;
				};
				return true;
			},
			onSubmit() {
				let flag = this.check();
				if (!flag) {
					return;
				};
				let that = this;
				that.$refs.payPop.open({
					type: 2,
					total_money: that.isprice,
					actual_money: that.isprice
				});
				that.formData.license = this.fileList[0].url;
				console.log('=-----------------==')
				console.log(that.formData.license);

			},
			payBack(e) {
				console.log('支付完成')
				this.formData = {
					...this.formData,
					...e
				};
				api.base.getDev_applyApply(this.formData).then(res => {
					console.log('添加机构详情', res)

					// this.getData();
					// this.$router.go(0);
					// this.formData = {
					// 	types: 1,
					// 	company: '',
					// 	address: '',
					// 	name: '',
					// 	phone: '',
					// 	organization_type: 1,
					// 	brand: [],
					// 	license: '',
					// 	main_content: '',
					// 	total_money: 200,
					// 	actual_money: 200,
					// 	payment: '',
					// 	terminal: uni.getSystemInfoSync().platform
					// };
					// this.fileList.splice(0,1);

					// this.$router.go(0);

					// console.log('结束',this.fileList)
					// this.$forceUpdate();
					this.getData();

				})

			},
			onRemove(index, lists) {
				console.log('删除')
				if (this.isDetail&&this.isDetail.status!=3) {
					return;
				};
				this.fileList.splice(index, 1)
				//   this.imgNum--
			},
			onsSuccess(data, index, lists, name) {
				this.fileList.push({
					url: data.data.url
				})

				//   this.imgNum++
			},
		}
	}
</script>

<style lang="scss" scoped>
    
	// 头部状态
	.waiting{
		height: 88rpx;
        background: #F9AE3D;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		width: 100%;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-bottom: 24rpx;
		margin-top: -24rpx
	}
	.fail{
		height: 88rpx;
		background: #F56C6C;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		width: 100%;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-bottom: 24rpx;
		margin-top: -24rpx
	}
	@import "../my.scss";

	.institution {
		padding-top: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.selectWra {
			width: 686rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 10rpx 0rpx 24rpx 0rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.selectBox {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				justify-content: flex-start;
				// .selectBox-part:nth-child(2) {
				// 	margin-left: 0;
				// }

				&-part {
					width: 197rpx;
					height: 66rpx;
					background: #ffffff;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #6d0cf7;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #6d0cf7;
					margin-bottom: 20rpx;
					margin-left: 24rpx;
					box-sizing: border-box;

					&-name {
						width: 125rpx;
						text-align: center;
					}

					image {
						flex-shrink: 0;
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>